<template>
  <view class="cont">
    <x-nav-bar title="体重分析" />
    <view class="ss-flex stu-detail ss-row-between">
      <view class="shengao">
        <text class="num">身高</text>
        <view class="txt">170CM</view>
      </view>
      <view class="tizhong">
        <text class="num">体重</text>
        <view class="txt">50KG</view>
      </view>
      <!-- <view class="shili">
        <text class="num">体重指数</text>
        <view class="txt">20.5</view>
      </view> -->
    </view>
    <view class="charts-box">
      <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
    </view>
    <!-- <view class="img-box">
      <image
        :src="false?'https://p2.itc.cn/images01/20210616/fad294d28ce74552b8c8f9b22d195f20.jpeg':'https://p4.itc.cn/images01/20210616/fb261cc1abdd470580bbdfcffa17760c.jpeg'"
        mode="aspectFit" @click="previewMedia(false)"></image>
    </view> -->
  </view>

</template>

<script setup>
  import {
    ref,
    reactive,
    onMounted
  } from "vue"
  import qiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  const opts = reactive({
    color: ["#1890FF", "red"],
    enableScroll: true,
    xAxis: {
      itemCount: 5
    },
    yAxis: {
      gridType: "dash",
      dashLength: 8
    }

  })
  let chartData = reactive({
    categories: [],
    series: [{
        name: "身高",
        data: [140, 120, 81, 126, 146, 156, 146, 111, 84, 103, 110, 158, 112, 132, 152, 138, 83, 164, 82, 84, 99,
          134, 159, 114, 176, 145, 148, 83, 105, 170, 154, 141, 96, 132, 158, 171
        ]
      },
      {
        name: "体重",
        data: [85, 56, 13, 64, 88, 23, 85, 33, 38, 31, 97, 50, 14, 58, 56, 14, 20, 59, 90, 41, 48, 33, 87, 24, 45,
          37, 66, 89, 96, 94, 57, 15, 100, 99, 98, 64
        ]
      }
    ]
  })
  // 获取三年月份
  const yearMonthArray = () => {
    // 获取当前年份和月份
    let currentYear = new Date().getFullYear();
    let currentMonth = new Date().getMonth() + 1; // getMonth() 返回 0-11，需加 1

    // 初始化存储结果的数组
    const yearMonthArray = [];

    // 循环遍历三年，共计 36 个月
    for (let i = 0; i < 36; i++) {
      // 格式化年份和月份
      const formattedMonth = currentMonth.toString().padStart(2, '0');
      yearMonthArray.push(`${currentYear}-${formattedMonth}`);

      // 递减月份
      currentMonth--;

      // 如果月份小于 1，则回到上一年，并将月份设为 12
      if (currentMonth < 1) {
        currentMonth = 12;
        currentYear--;
      }
    }
    return yearMonthArray.reverse()
  }
  // 放大查看图片
  const previewMedia = (flag) => {
    let urls = ['https://p2.itc.cn/images01/20210616/fad294d28ce74552b8c8f9b22d195f20.jpeg']
    if (flag) {
      urls = ['https://p4.itc.cn/images01/20210616/fb261cc1abdd470580bbdfcffa17760c.jpeg']
    }
    uni.previewImage({
      indicator: true,
      current: 0,
      urls,
    });
  };
  onMounted(() => {
    chartData.categories = yearMonthArray()
  })
</script>

<style lang="scss" scoped>
  .cont {
    position: absolute;
    min-height: 100%;
    width: 100vw;
    background: #fff;

    .stu-detail {
      padding: 24rpx 24rpx 0;

      >view {
        box-sizing: border-box;
        width: 210rpx;
        height: 118rpx;
        border-radius: 16rpx;
        padding: 8rpx;
        text-align: center;

        &.tizhong {
          background: url('../../static/images/tizhong.png') no-repeat 100%/100%;
        }

        &.shengao {
          background: url('../../static/images/shengao.png') no-repeat 100%/100%;
        }

        &.shili {
          background: url('../../static/images/shili.png') no-repeat 100%/100%;
        }

        .num {
          font-weight: bold;
          font-size: 26rpx;
          height: 55rpx;
          line-height: 55rpx;
          // padding-left: 70rpx;
        }

        .txt {
          color: #333;
          font-size: 24rpx;
          height: 55rpx;
          // padding-left: 20rpx;
          text-align: center;
        }
      }
    }

    .charts-box {
      width: 100%;
      height: 300px;
    }

    .img-box {
      font-size: 0;
      width: 100%;

      image {
        width: 100%;
      }
    }
  }
</style>